<template>
  <div class="test-container">
    <h2>测试展示模式（Show Mode）</h2>
    <!-- 测试展示模式 -->
    <PictureBanner
      mode="show"
      :pictureList="[
        { title: '风景1', meta: 'https://via.placeholder.com/600x300/FF5733/FFFFFF?text=风景1' },
        { title: '风景2', meta: 'https://via.placeholder.com/600x300/33FF57/FFFFFF?text=风景2' },
        { title: '风景3', meta: 'https://via.placeholder.com/600x300/3357FF/FFFFFF?text=风景3' }
      ]"
    />

    <h2>测试跳转模式（Link Mode）</h2>
    <!-- 测试跳转模式 -->
    <PictureBanner
      mode="link"
      :pictureList="[
        {
          title: '谷歌',
          meta: 'https://via.placeholder.com/600x300/FF5733/FFFFFF?text=谷歌',
          url: 'https://www.google.com'
        },
        {
          title: '必应',
          meta: 'https://via.placeholder.com/600x300/33FF57/FFFFFF?text=必应',
          url: 'https://www.bing.com'
        },
        {
          title: '百度',
          meta: 'https://via.placeholder.com/600x300/3357FF/FFFFFF?text=百度',
          url: 'https://www.baidu.com'
        }
      ]"
    />
  </div>
</template>

<script>
import PictureBanner from '@/components/banner/PictureBanner.vue'

export default {
  name: 'TestPictureBanner',
  components: {
    PictureBanner
  }
}
</script>

<style scoped>
.test-container {
  padding: 20px;
}

h2 {
  margin-bottom: 20px;
  color: #333;
  font-weight: bold;
}
</style>
